<script setup lang="ts">
import Docker from './icons/docker/Docker.vue';
import Home from './icons/Home.vue';
import User from './icons/User.vue';
import Perm from './icons/Perm.vue';
import Role from './icons/Role.vue';
import Container from './icons/docker/Container.vue';
import Instance from './icons/docker/Instance.vue';
import Image from './icons/docker/Image.vue';
import Code from './icons/code/Code.vue';
import Environment from './icons/code/Environment.vue';
import System from './icons/system/System.vue';
import Version from './icons/system/Version.vue';
import Resource from './icons/resource/Resource.vue';
import Community from './icons/community/Community.vue';
import Quartz from './icons/quartz/Quartz.vue';
import Notice from './icons/system/Notice.vue';
import Log from './icons/log/Log.vue';
import Subject from './icons/subject/Subject.vue';

const isCollapse = defineModel("isCollapse");

const handleOpen = () => {

}

const handleClose = () => {

}

</script>

<template>
    <div class="container">
        <el-menu :router="true" default-active="2" class="el-menu-vertical" active-text-color="#ffd04b"
            background-color="#263445" text-color="#fff" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
            <el-menu-item index="/" class="item">
                <el-icon>
                    <Home />
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/user" class="item">
                <el-icon>
                    <User />
                </el-icon>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/perm" class="item">
                <el-icon>
                    <Perm />
                </el-icon>
                <span>权限管理</span>
            </el-menu-item>
            <el-menu-item index="/role" class="item">
                <el-icon>
                    <Role />
                </el-icon>
                <span>角色管理</span>
            </el-menu-item>
            <el-sub-menu index="1" class="item">
                <template #title>
                    <el-icon>
                        <Docker />
                    </el-icon>
                    <span>Docker管理</span>
                </template>
                <el-menu-item index="/docker/instance">
                    <el-icon>
                        <Instance />
                    </el-icon>
                    <span>实例管理</span>
                </el-menu-item>
                <el-menu-item index="/docker/container">
                    <el-icon>
                        <Container />
                    </el-icon>
                    <span>容器管理</span>
                </el-menu-item>
                <el-menu-item index="/docker/image">
                    <el-icon>
                        <Image />
                    </el-icon>
                    <span>镜像管理</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2" class="item">
                <template #title>
                    <el-icon><Code /></el-icon>
                    <span>在线编程</span>
                </template>
                <el-menu-item index="/code/environment">
                    <el-icon>
                        <Environment />
                    </el-icon>
                    <span>环境管理</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3" class="item">
                <template #title>
                    <el-icon>
                        <System />
                    </el-icon>
                    <span>系统管理</span>
                </template>
                <el-menu-item index="/system/version">
                    <el-icon>
                        <Version />
                    </el-icon>
                    <span>版本管理</span>
                </el-menu-item>
                <el-menu-item index="/system/notice">
                    <el-icon>
                        <Notice />
                    </el-icon>
                    <span>公告管理</span>
                </el-menu-item>
                <el-menu-item index="/system/tag">
                    <el-icon>
                        <Notice />
                    </el-icon>
                    <span>标签管理</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4" class="item">
                <template #title>
                    <el-icon>
                        <Resource />
                    </el-icon>
                    <span>资源管理</span>
                </template>
            </el-sub-menu>
            <el-sub-menu index="5" class="item">
                <template #title>
                    <el-icon>
                        <Community />
                    </el-icon>
                    <span>社区管理</span>
                </template>
                <el-menu-item index="/community/list">
                    <el-icon>
                        <Notice />
                    </el-icon>
                    <span>社区列表</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6" class="item">
                <template #title>
                    <el-icon>
                        <Subject />
                    </el-icon>
                    <span>题目管理</span>
                </template>
                <el-menu-item index="/subject/list">
                    <el-icon>
                        <Subject />
                    </el-icon>
                    <span>题目集</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7" class="item">
                <template #title>
                    <el-icon>
                        <Quartz />
                    </el-icon>
                    <span>定时任务</span>
                </template>
            </el-sub-menu>
            <el-sub-menu index="8" class="item">
                <template #title>
                    <el-icon>
                        <Log />
                    </el-icon>
                    <span>日志管理</span>
                </template>
            </el-sub-menu>
            <el-sub-menu index="9" class="item">
                <template #title>
                    <el-icon><Code /></el-icon>
                    <span>AI管理</span>
                </template>
                <el-menu-item index="/ai/model">
                    <el-icon>
                        <Environment />
                    </el-icon>
                    <span>模型管理</span>
                </el-menu-item>
                <el-menu-item index="/ai/prompt">
                    <el-icon>
                        <Environment />
                    </el-icon>
                    <span>提示词管理</span>
                </el-menu-item>
                <el-menu-item index="/ai/knowledge">
                    <el-icon>
                        <Environment />
                    </el-icon>
                    <span>知识库管理</span>
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    width: 100%;

    .el-menu-vertical {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;

        .item {
            width: 100%;
        }
    }
}
</style>